<?php
	require_once("mars.php"); 
	require_once("conversions.php"); 
	require_once("modules.php"); 
?>
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles/tooltip_style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mWeather - the weather on Mars</title>
<link href="styles/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Squada+One|Changa+One|Geo|Righteous|Aldrich' rel='stylesheet' type='text/css'>
<style>
	#button
	{
		cursor: pointer;
		background:#000;
		position:relative;
		margin-left: 80px;
	}
	#button:hover
	{
		color: #ff9320;
	}
</style>
<script src="conversions.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script> 
$(document).ready(function() {
$("#button").click(function () {
$(".toggle").toggle();
});});
</script>

</head>
<body>
<script type="text/javascript" language="javascript" src="js/tooltip_script.js"></script>
<?php getHeader() ?>
<div class="container">
  <div class="content">
      <div id="table">
      <table>
      	<tr>
      		<td colspan="2" class="td-first"  onmouseover="tooltip.show('<strong>Date and sol</strong><br />The current Earth and Martian days. One Martian day is called a sol and is a little more than 24 hours long');" onmouseout="tooltip.hide();"><?php print(date("j F Y", strtotime($lastReport['terrestrial_date'])) . " (Sol ".$lastReport['sol'].")"); ?></td>
      	</tr>
      	<tr>
      		<td colspan="2"><img class="c-img" src="images/icons/tb_sun.png" width="75" height="75" alt="sunny" onmouseover="tooltip.show('<strong>Sunny</strong><br />The weather is sunny and clear');" onmouseout="tooltip.hide();"/>
			<span id="button"><img src="images/icons/convert.png"onmouseover="tooltip.show('Convert');" onmouseout="tooltip.hide();"></img></span></td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_temp.png" width="24" height="70" alt="temperature"  onmouseover="tooltip.show('<strong>Temperature</strong><br />The minimum and maximum temperature for the given day on Mars');" onmouseout="tooltip.hide();"/></td>
      		<td><span class="toggle"><?php  print("Min " . $lastReport['min_temp'] . "&deg;C"); ?> <br/> Max <?php  print($lastReport['max_temp'])."&deg;C"; ?></span>
				<span class="toggle" style="display:none;"><?php  print("Min " . celsiusToFahrenheit($lastReport['min_temp']). "&deg;F"); ?> <br/> Max  <?php  print(celsiusToFahrenheit($lastReport['max_temp']))."&deg;F"; ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_press.png" width="63" height="63" alt="pressure"  onmouseover="tooltip.show('<strong>Pressure</strong><br />The average atmospheric pressure for the given day on Mars');" onmouseout="tooltip.hide();"/></td>
      		<td>
			<span class="toggle"><?php  print($lastReport['pressure'] . " Pa"); ?></span>
				<span class="toggle" style="display:none;"><?php  print(paTommHg($lastReport['pressure']) . " mm Hg"); ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_wind.png" width="57" height="61" alt="wind" onmouseover="tooltip.show('<strong>Wind</strong><br />The wind\'s speed and direction for the fiven day on Mars');" onmouseout="tooltip.hide();"/></td>
      		<td><span class="toggle"><?php  print($lastReport['wind_speed'] . " km/h ". $lastReport['wind_direction']); ?></span>
				<span class="toggle" style="display:none;"><?php  print(kmhToMph($lastReport['wind_speed']) . " mph " . $lastReport['wind_direction']); ?></script></span>
				</td>
      	</tr>
      	<tr>
      		<td><img src="images/icons/tb_rise.png" width="71" height="35" alt="sunrise" onmouseover="tooltip.show('<strong>Sunrise</strong><br />The time of sunrise on the given day, measured in Martian time');" onmouseout="tooltip.hide();"/></td>
      		<td><?php  print($lastReport['sunrise']); ?> </td>
      	</tr>
        <tr>
      		<td><img src="images/icons/tb_set.png" width="71" height="35" alt="sunset"  onmouseover="tooltip.show('<strong>Sunset</strong><br />The time of sunset on the given day, measured in Martian time');" onmouseout="tooltip.hide();"/></td>
      		<td><?php  print($lastReport['sunset']); ?> </td>
			<tr><td onmouseover="tooltip.show('<strong>Season</strong><br />The season is expressed in two ways - in months since the vernal equinox, and solar longitude (Ls).<br />Ls = 0&deg; corresponds to the vernal equinox on the Earth\'s northern hemisphere, Ls = 90&deg; - to the summer solstice, and so on');" onmouseout="tooltip.hide();">Season</td><td><?php print($lastReport['season']."<br />"."Ls: ".$lastReport['ls']); ?> </td>
      	</tr>
      </table></div>
    <!-- end .content --></div>
     <aside class="sidebar1">
    <p>Welcome to our site, Mars enthusiast! Whether you want to learn about a different climate than you are used to, or want to plan the next colony in space, you are free to explore the weather conditions on the Red planet.<br />We wish you a nice visit!<p/>
	<p style="font-family: Righteous; color: #ff9320; font-size: 18px; align: center"><span style="font-size: 22px;"><br />Coming soon: </span><br/>The mWeather app for your smartphone!<br /><br /></p><p>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
      <a class="twitter-timeline"  href="https://twitter.com/MarsCuriosity"  data-widget-id="325376454584041473">Tweets by @MarsCuriosity</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
    <!-- end .sidebar1 --></aside>
  <!-- end .container --></div>
<div id="mars"></div>
</body>
</html>
